<template>
	<div class="detailsBox">
		<div class="detailsBox_top">
			<el-card class="box-card">
				<div>
					<el-button type="" text="返回" @click="goback">
						返回
					</el-button>

				</div>
				<div class="namebox">
					<div class="name">当前生坯编号:</div>
					<div class="num">{{serialNumber}}</div>
				</div>

			</el-card>
		</div>
		<div class="detailsBox_center">
			<div class="detailsBox_center_pl">
				<el-card class="box-card">
					<el-table :data="tableData" border style="width: 100%" :header-cell-style="headerCellStyle">
						<el-table-column v-for="(item, index) in table" :key="item.prop" :prop="item.prop"
							header-align="center" :label="item.label" :width="item.width" align="center">

							<el-table-column v-if="item.unit!=null" :prop="item.prop" :label="item.unit"
								header-align="center" :key="item.prop" align="center">
								<template #default="scope">
									<div>
										{{ scope.row[item.prop] }}
									</div>
								</template>
							</el-table-column>
						</el-table-column>

					</el-table>
				</el-card>
			</div>
			<div class="detailsBox_center_hn">
				<el-card class="box-card">
					<div class="boxB">
						<div class="left">
							<el-table :data="zhntableData" border style="width: 100%"
								:header-cell-style="headerCellStyle">

								<el-table-column v-for="(item, index) in zhntable" :key="item.prop" :prop="item.prop"
									:label="item.label" :width="item.width" align="center">
									<el-table-column v-if="item.unit!=null" :prop="item.prop" :label="item.unit"
										header-align="center" :key="item.prop" align="center">
										<template #default="scope">

											
											<div >
												{{ scope.row[item.prop] }}
											</div>
										</template>
									</el-table-column>
									
									
									
									
								</el-table-column>

							</el-table>

						</div>
						<el-divider border-style="dashed" direction="vertical" style="height: 300px;margin: 0 20px;" />
						<div class="right">
							<el-table :data="fhntableData" border style="width: 100%"
								:header-cell-style="headerCellStyle">

								<el-table-column v-for="(item, index) in zhntable" :key="item.prop" :prop="item.prop"
									:label="item.label" :width="item.width" align="center">
									<el-table-column v-if="item.unit!=null" :prop="item.prop" :label="item.unit"
										header-align="center" :key="item.prop" align="center">
										<template #default="scope">
											<div v-if="item.prop === 'primarySecondary'">

												{{ getZf(scope.row['primarySecondary']) }}
											</div>
											<div v-else>
												{{ scope.row[item.prop] }}
											</div>
										</template>
									</el-table-column>
								
								</el-table-column>

							</el-table>
						</div>
					</div>

				</el-card>
			</div>

		</div>
		<div class="detailsBox_bottom">
			<el-card class="box-card">

				<el-table :data="zdtableData" border style="width: 100%" :header-cell-style="headerCellStyle">
					<el-table-column v-for="(item, index) in zdtable" :key="item.prop" :prop="item.prop"
						:label="item.label" :width="item.width">
						<template #default="scope">

							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</el-table-column>

				</el-table>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ElMessage } from 'element-plus'
	import { reactive, ref, onMounted, defineComponent } from 'vue'
	import { useRoute, useRouter } from 'vue-router';
	import { getDetailsList, getList } from '@/request/index'
	import { Edit } from '@element-plus/icons'
	import { log } from 'console';

	const route = useRoute()
	const router = useRouter()
	const serialNumber = ref('')
	const headerCellStyle = reactive({
		backgroundColor: '#33cccc', // 设置表头背景颜色
		color: '#ffffff', // 设置表头文字颜色
	})

	const tableData = ref([])
	const zdtableData = ref([])
	const zhntableData = ref([])
	const fhntableData = ref([])
	const zhntable = reactive([

		{
			prop: 'primarySecondaryToString',
			label: '主副',
			unit: null,
			width: null
		},
		{
			prop: 'westStringEnterpotDatetime',
			label: '干料进锅时间',
			unit: null,
			width: 120
		},

		{
			prop: 'westStringAddoilDatatime0',
			label: '首次加油时间',
			unit: null,
			width: 120
		},
		{
			prop: 'westUintAddoilWeight0',
			label: '首次加油量',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westFloatRatioOilfeeding',
			label: '油占比',
			unit: '%',
			width: null
		},
		{
			prop: 'westUintAddoilWeight',
			label: '重复加油量',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUintDrymixTime',
			label: '干混计时',
			unit: 'm',
			width: null
		},
		{
			prop: 'westIntDrymixTemp',
			label: '干混温度',
			unit: '℃',
			width: null
		},
		{
			prop: 'westUintWetmixTime',
			label: '湿混计时',
			unit: 'm',
			width: null
		},
		{
			prop: 'westIntWetmixTemp',
			label: '湿混温度',
			unit: '℃',
			width: null
		},
	])
	const zdtable = reactive([
		
		{
			prop: 'deviceNumber',
			label: '成型机号',
			unit: null,
			width: 180
		},
		{
			prop: 'serialNumber',
			label: '生坯编号',
			unit: null,
			width: null
		},
		{
			prop: 'carbonBlockModel',
			label: '品种',
			unit: null,
			width: 180
		},
		{
			prop: 'materialWeight',
			label: '加料量',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'carbonBlockHeight',
			label: '炭块高度',
			unit: 'mm',
			width: null
		},
		{
			prop: 'startTime',
			label: '振动开始时间',
			unit: null,
			width: null

		},
		{
			prop: 'endTime',
			label: '振动结束时间',
			unit: null,
			width: null

		},
		{
			prop: 'vibrationTime0',
			label: '振动时长',
			unit: 's',
			width: null

		},
		{
			prop: 'vibrationTime',
			label: '重复振动时长',
			unit: 's',
			width: null

		},

	])
	const table = reactive([
		{
			prop: 'primarySecondaryToString',
			label: '主副',
			unit: null,
			width: null
		},
		{
			prop: 'westStringFeedingdatetime',
			label: '配料开始时间',
			unit: null,
			width: 180
		},
		{
			prop: 'westUint01Weight',
			label: ' 0-1',
			unit: 'Kg',
			width: null

		},
		{
			prop: 'westUint13Weight',
			label: '1-3',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUint36Weight',
			label: '3-6',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUintDustWeight',
			label: '粉子',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUintSouthdustWeight',
			label: '南尘粉',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUintNorthdustWeight',
			label: '北尘粉',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUintLoosepasteWeight',
			label: '散糊料',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUintRawWeight',
			label: '生碎',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUintCookedWeight',
			label: '熟碎',
			unit: 'Kg',
			width: null
		},
		{
			prop: 'westUintBlackDustWeight',
			label: '黑法粉',
			unit: 'Kg',
			width: null
		}
	])
	const getZf = (prop) => {
		console.log('prop', prop)
		if (prop === 1) {
			return '主'
		} else if (prop === 2) {
			return '副'
		}
	}
	const getDetail = (params) => {

		getDetailsList(params).then(res => {
			console.log('啊', res)
			if (res.data.code === 200) {
				tableData.value = []
				zhntableData.value = []
				fhntableData.value = []
				tableData.value = res.data.result
				zhntableData.value.push(res.data.result[0])
				fhntableData.value.push(res.data.result[1])


			} else {
				ElMessage({
					message: res.data.message,
					type: 'error',
				})
			}




		}).catch(err => {
			ElMessage({
				message: err,
				type: 'error',
			})
		})
	}
	const goback = () => {
		console.log(1)
		router.push({ path: '/' });
	}
	const getLists = (params) => {
		getList(params).then(res => {
			if (res.data.code === 200) {
				zdtableData.value = []
				zdtableData.value = res.data.result.records
			} else {
				ElMessage({
					message: res.data.message,
					type: 'error',
				})
			}




		}).catch(err => {
			ElMessage({
				message: err,
				type: 'error',
			})
		})
	}
	onMounted(() => {
		serialNumber.value = route.query.serialNumber
		getLists({ serialNumber: serialNumber.value })
		getDetail({ serialNumber: serialNumber.value })

	})
</script>

<style lang="scss" scoped>
	.detailsBox {
		padding: 20px;
		box-sizing: border-box;

		&_top {
			.box-card {
				.namebox {
					margin-top: 12px;
					padding-left: 50px;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.name {
						font-size: 14px;
						margin-right: 8px;
					}

					.num {
						font-size: 18px;
						font-weight: 550;
					}
				}
			}

		}

		&_center {
			margin-top: 18px;

			&_pl {}

			&_hn {
				margin-top: 18px;

				.box-card {
					.boxB {
						display: flex;
						align-items: center;
						padding: 0 20px;
						box-sizing: border-box;
					}

				}

			}
		}

		&_bottom {
			margin-top: 18px;


		}
	}
</style>